<template>
  <el-card class="file-card" shadow="hover">
    <div class="card-content">
      <!-- 缩略图区域 -->
      <div class="thumbnail" @click="handlePreview">
        <img v-if="['pdf', 'doc', 'docx', 'xlsx', 'xls'].includes(file.fileType)" :src="thumbnail"
             class="document-thumbnail">
        <div v-else class="file-type-icon">
          <i :class="fileIcon"></i>
          <span class="format-text">{{ file.fileType }}</span>
        </div>
      </div>

      <!-- 右侧内容 -->
      <div class="right-content">
        <!-- 文件信息 -->
        <div class="file-info">
          <div class="file-name" :title="file.fileName">{{ file.fileName }}</div>
          <div class="file-meta">
            <span class="file-size">{{ formattedSize }}</span>
            <el-divider direction="vertical"></el-divider>
            <span class="upload-time">{{ file.uploadTime }}</span>
          </div>
        </div>
      </div>
       <!-- 状态指示和操作按钮 -->
       
    </div>
     <div class="status-actions">
          <el-tag :type="statusType" size="small" class="status-tag">
            {{ statusText }}
          </el-tag>
          <div class="file-actions">
            <el-tooltip content="预览" placement="top">
              <el-button type="info" icon="el-icon-view" size="small" circle @click.stop="handlePreview"></el-button>
            </el-tooltip>
            <el-tooltip content="下载" placement="top">
              <el-button type="primary" icon="el-icon-download" size="small" circle @click="handleDownload"></el-button>
            </el-tooltip>
            <el-tooltip content="删除" placement="top">
              <el-button type="danger" icon="el-icon-delete" size="small" circle @click="handleDelete"></el-button>
            </el-tooltip>
          </div>
        </div>
  </el-card>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';

interface FileItem {
  id: string;
  fileName: string;
  fileSize: number;
  uploadTime: string;
  fileType: string;
  indexing_status: string;
  progress: number;
  download_url: string;
  preview_url: string;
}

@Component
export default class FileCard extends Vue {
  @Prop({ required: true }) readonly file!: FileItem;
  
  get formattedSize(): string {
    return this.formatFileSize(this.file.fileSize);
  }

  get statusText(): string {
    return this.formatStatus(this.file.indexing_status);
  }

  get statusType(): string {
    return this.getStatusType(this.file.indexing_status);
  }

  get thumbnail(): string {
    return this.getThumbnail(this.file.fileType);
  }

  get fileType(): string {
    return this.getFileType(this.file.fileName);
  }

  get fileIcon(): string {
    const ext = this.file.fileName.split('.').pop()?.toLowerCase() || '';
    switch (ext) {
      case 'pdf': return 'el-icon-document-pdf';
      case 'doc':
      case 'docx': return 'el-icon-document-word';
      default: return 'el-icon-document';
    }
  }

  private formatFileSize(size: number): string {
    if (size === 0) return '0 B';
    const k = 1024;
    const sizes = ['B', 'KB', 'MB', 'GB'];
    const i = Math.floor(Math.log(size) / Math.log(k));
    return parseFloat((size / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
  }

  private formatStatus(status: string): string {
    const statusMap: Record<string, string> = {
      waiting: '等待中',
      parsing: '解析文件',
      cleaning: '内容清洗',
      splitting: '文档分段',
      indexing: '建立索引',
      completed: '已完成',
      error: '处理失败'
    };
    return statusMap[status] || '未知状态';
  }

  private getStatusType(status: string): string {
    const typeMap: Record<string, string> = {
      waiting: 'info',
      parsing: '',
      cleaning: 'warning',
      splitting: 'warning',
      indexing: 'success',
      completed: 'success',
      error: 'danger'
    };
    return typeMap[status] || '';
  }

  private getThumbnail(fileType: string): string {
    const images = {
      pdf: require('@/assets/image/pdf_icon.png'),
      doc: require('@/assets/image/word_icon.png'),
      docx: require('@/assets/image/word_icon.png'),
    };
    const st = images[fileType as keyof typeof images] || images['paper'];

    return st;
  }

  private getFileType(filename: string): string {
    const ext = filename.split('.').pop()?.toLowerCase() || '';
    if (['doc', 'docx'].includes(ext)) return 'Word';
    if (ext === 'pdf') return 'PDF';
    if (['xlsx', 'xls'].includes(ext)) return 'Excel';
    return '未知格式';
  }

  private handlePreview() {
    this.$emit('preview', this.file);
  }

  private handleDownload() {
    this.$emit('download', this.file);
  }

  private handleDelete() {
    this.$emit('delete', this.file);
  }
}
</script>

<style lang="scss" scoped>
.file-card {
  margin-bottom: 20px;
  transition: transform 0.3s;
  
  &:hover {
    transform: translateY(-3px);
    .file-actions {
      opacity: 1;
      transform: translateX(0);
      visibility: visible;
    }
  }

  .card-content {
    display: flex;
    gap: 16px;
    height: 100%;
  }

  .thumbnail {
    flex: 0 0 60px;
    height: 60px;
    background: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    transition: all 0.3s ease;

    &:hover {
      .document-thumbnail {
        transform: scale(1.05);
      }
    }

    .document-thumbnail {
      max-width: 80%;
      max-height: 80%;
      object-fit: contain;
      transition: transform 0.3s ease;
    }

    .file-type-icon {
      text-align: center;
      padding: 10px;
      i {
        font-size: 48px;
        color: #409EFF;
        display: block;
        margin-bottom: 8px;
      }
      .format-text {
        display: block;
        color: #909399;
        font-size: 12px;
        text-transform: uppercase;
      }
    }
  }

  .right-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100%;
  }

  .file-info {
    flex: 1;
    min-height: 60px;
    
    .file-name {
      font-weight: 600;
      font-size: 14px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      line-height: 1.4;
    }

    .file-meta {
      margin-top: 8px;
      font-size: 12px;
      color: #909399;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      
      .el-divider {
        background-color: #dcdfe6;
        margin: 0 6px;
        height: 12px;
      }
    }
  }

  .status-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
    padding-top: 8px;
    padding-left: 5px;
    padding-right: 5px;
    border-top: 1px solid #f0f0f0;
  }

  .status-tag {
    transition: all 0.3s ease;
  }

  .file-actions {
    display: flex;
    gap: 2px;
    margin-left: 10px;
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.3s ease;
    visibility: hidden;
  }
}

@media (max-width: 768px) {
  .file-card {
    .thumbnail {
      flex: 0 0 80px;
      height: 80px;
      
      .file-type-icon i {
        font-size: 32px;
      }
    }
    
    .file-actions {
      gap: 4px;
    }
  }
}
</style>